﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no">
    <title></title>
    <!-- 基础css begin -->
    <link type="text/css" rel="stylesheet" href="/Content/BenzXH/pkg/css/base.css">
    <!-- 基础css end -->
    <!-- 组件依赖css begin -->
    <link type="text/css" rel="stylesheet" href="/Content/BenzXH/css/widget/button/button.default.css">
    <link type="text/css" rel="stylesheet" href="/Content/BenzXH/css/widget/button/button.css">
    <link type="text/css" rel="stylesheet" href="/Content/BenzXH/css/widget/modal/modal.css">
    <link href="/Content/benzxh/js/widget/swiper/swiper.min.css" rel="stylesheet" />
    <link href="/Content/benzxh/js/widget/swiper/swiper.scale.css" rel="stylesheet" />
    <!-- 组件依赖css end -->
    <!-- 公用css begin -->
    <link type="text/css" rel="stylesheet" href="/Content/BenzXH/pkg/css/layout.css?ver=201511261334">
    <!-- 公用css end -->
    <!-- 页面css begin -->
    <link type="text/css" rel="stylesheet" href="/Content/BenzXH/css/lynn.css?ver=201511261334">
    <link type="text/css" href="/Content/benzxh/css/fix.css" rel="stylesheet" />
    <!-- 页面css end -->
    <style>
        #article_content img, #article_content video {
            max-width: 100%;
        }

        #detail .article-title {
            font-size: 18px;
        }

        #detail .publish-time {
            font-size: 12px;
            padding: 0;
            margin-top: 10px;
        }

        #detail .word-wrap {
            white-space: normal;
        }

        .content {
            padding: 0;
            background-color: transparent;
        }

        header, article {
            padding: 10px 20px;
            background-color: rgba(255,255,255,0.1);
        }

        header {
            padding-bottom: 30px;
            margin-bottom: 5px;
        }

        .count {
            margin-left: 0;
        }

        .icon-eyes {
            width: 25px;
            height: 18px;
            margin-left: 30px;
            margin-right: 8px;
        }
    </style>
</head>
<body id="detail">
    <div class="background-full"></div>
    <div id="wrapper">
        <div class="padding-0">
            <div class="content">
                <div style="padding-bottom:0;">
                    <header>
                        <div id="article_title" class="article-title word-wrap">

                        </div>
                        <div class="publish-time"></div>
                    </header>
                    <article>
                        <div id="article_content" class="word-wrap">
                        </div>
                        <ul class="margin-top-10 margin-bottom-10 image-box" id="article_imagelist">
                        </ul>
                        <section class="actions" style="margin-bottom:0px;">
                            <div class="padding-bottom-0">
                                <span id="diggclass" class="icon icon-ambia"></span>
                                <span id="diggcount" class="count">0</span>
                                <span class="icon icon-eyes"></span><span class="count" id="viewcount">0</span>
                                <span id="btnComment" class="icon icon-comments" style="display:none;"></span>
                                <span id="commentcount" class="count" style="display:none;">0</span>
                            </div>
                            <div id="comment-input" class="relative" style="display:none;">
                                <div class="padding-20">
                                    <textarea id="txtComment" class="input-text width-full" data-emotion></textarea>
                                    <div class="text-align-right relative" style="margin-top:8px;">
                                        <i id="btnEmotionSelect" class="icon-emotion" style="position:absolute; left:0;"></i>
                                        <button id="btnSubmitComment" type="button" class="button" style="padding:3px 15px;">发表</button>
                                    </div>
                                </div>
                                <div data-part="emotion" style="display: none; margin-top: -20px;"></div>
                            </div>
                        </section>
                    </article>
                </div>
            </div>
            <section class="comments comment-padding" style="padding-top: 0;">
                <ul id="commentlist" class="comment-list"></ul>
                <button id="comment_more" type="button" class="default-button margin-top-20 width-full" style="display: none;">更多评论</button>
            </section>
        </div>
    </div>
    <!-- 组件依赖js begin -->
    <script type="text/javascript" charset="utf-8" src="/Content/BenzXH/pkg/js/core.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Content/BenzXH/js/widget/modal/modal.js"></script>
    <script src="/Content/benzxh/js/widget/swiper/swiper.jquery.min.js"></script>
    <script src="/Content/benzxh/js/widget/swiper/swiper.scale.js?ver=201511261335"></script>
    <script src="/Content/benzxh/js/common.js?ver=201511261335"></script>
    <script type="text/javascript">
        $(function () {
            var isPreview = getQueryStringByName("IsPreview");
            if (!isPreview || isPreview != 1) {
                return;
            }
            var articleId = getQueryStringByName("ArticleId");
            if (!articleId) {
                return;
            }

            var objAjaxEntity = new AjaxEntity();
            objAjaxEntity.url = "/bbsapi/executeapicache";
            objAjaxEntity.type = "Get";
            objAjaxEntity.data =
            {
                Appsettiing: "BenzXh",
                ApiGroupId: "ApiGroup_BenzXh",
                ApiId: "Article_UnPass",
                DbParameters: {
                    ArticleId: articleId
                },
                CacheTime: 10
            };
            objAjaxEntity.executeSuccess = function (objInvokeResult) {
                if (objInvokeResult.ResultCode == "Success") {
                    BindArticleInfo(objInvokeResult.Data[0][0]);
                    BindArticleInfoData(objInvokeResult.Data[1]);
                }
            }
            objAjaxEntity.execute();

        });

        function BindArticleInfo(objArticleInfo) {
            if (objArticleInfo == null) {
                return;
            }
            $("title").html(objArticleInfo.ArticleTitle);
            $("#article_title").html(objArticleInfo.ArticleTitle + "<br>" + objArticleInfo.SimpleTitle);
            var objCreateDate = new Date(Number(objArticleInfo.CreateDate.replace("/Date(", "").replace(")/", "")));
            $(".publish-time").html(objCreateDate.pattern("yyyy-MM-dd"));
            $("#diggcount").html(objArticleInfo.DiggCount);
            $("#viewcount").html(objArticleInfo.ViewCount);
            $("#commentcount").html(objArticleInfo.CommentCount);
        }

        function BindArticleInfoData(objArticleInfoDataList) {
            if (objArticleInfoDataList == null || objArticleInfoDataList.length <= 0) {
                return;
            }
            $.each(objArticleInfoDataList, function (i, objArticleInfoData) {
                if (objArticleInfoData.InfoDataType == "ArticleContent") {
                    //绑定文章内容
                    $("#article_content").html(objArticleInfoData.ArticleContent);
                } else if (objArticleInfoData.InfoDataType == "ArticlePictureCollection") {
                    var objArticlePictureCollection = JSON.parse(objArticleInfoData.ArticleContent);
                    if (typeof(objArticlePictureCollection)!="undefined"&& objArticlePictureCollection != null && objArticlePictureCollection.length > 0) {
                        //绑定文章图集
                        var html = "";
                        $.each(objArticlePictureCollection, function (i, objArticlePicture) {
                            if (objArticlePicture.PictureUrl) {
                                objArticlePicture.PictureUrl = objArticlePicture.PictureUrl + "?imageView2/2/w/800";
                            }
                            html += '<li id="img' + i + '" class="image image-cover" style="background-image: url(' + objArticlePicture.PictureUrl + ')" data-url="' + objArticlePicture.PictureUrl + '" onclick="PreviewImage(this)"></li>';
                        });
                        $("#article_imagelist").append(html);
                    }
                }
                
            });
        }

        function PreviewImage(source) {
            var mySwiper = slideImage({
                container: $(source).closest("ul"),
                selector: "li",
                current: $(source).index()
            });
        }
    </script>
</body>
</html>